<include file="/public/header" />
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layadmin-card-header-auto ">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">{:__('按状态查询')}</option>
                                <option value="3">{:__('驳回')}</option>
                                <option value="2">{:__('正常')}</option>
                                <option value="1">{:__('待审核')}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="type" lay-filter="type">
                                <option value="">{:__('按类型查询')}</option>
                                <option value="2">{:__('设计师')}</option>
                                <option value="1">{:__('工长')}</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <div id="treeNode" name="cateid" lay-filter="treeNode"></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline ">
                            <input name="title" class="layui-input" type="text" placeholder="{:__('关键字搜索')}" />
                        </div>
                    </div>

                    <div class="layui-inline">
                        <!-- // 默认搜索 -->
                        <button class="layui-btn icon-btn" lay-filter="formSearch" lay-submit><i
                                class="layui-icon layui-icon-search"></i>{:__('搜索')}</button>
                        <!-- // 打开添加页面 -->
                        <button class="layui-btn icon-btn" lay-open="" data-title="{:__('添加')}{:__('推荐')}"
                            data-url="#editforms" callback="add" lay-event="add">
                            <i class="layui-icon layui-icon-add-1"></i>{:__('添加')}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- // 创建数据实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms">
<div class="layui-fluid layui-bg-white" >
    <form class="layui-form layui-form-fixed" lay-filter="editforms">
    <input type="text" name="id" hidden="">
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('名称')}</label>
        <div class="layui-input-block">
            <input name="title" placeholder="{:__('请输入名称')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>    
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('联系电话')}</label>
        <div class="layui-input-block">
            <input name="mobile" placeholder="{:__('请输入联系电话')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div>  
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('类型')}</label>
        <div class="layui-input-block">
            <input name="type"  lay-filter="types" type="radio" value="1" title="{:__('工长')}" checked/>
            <input name="type" lay-filter="types" type="radio" value="2" title="{:__('设计师')}"/>
        </div>
    </div>                    
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('类别')}</label>
        <div class="layui-input-block">
            <div id="treeNodes" name="cateid" lay-filter="treeNodes"></div>
        </div>
    </div> 
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('经验/年')}</label>
        <div class="layui-input-block">
            <input name="exper" placeholder="{:__('请填写经验')}" type="number" class="layui-input"  lay-verify="required" />
        </div>
    </div> 
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('擅长')}</label>
        <div class="layui-input-block">
            <input name="begood" placeholder="{:__('请填写擅长内容')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div> 
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('省市区')}</label>
        <div class="layui-input-inline">
            <input name="province" placeholder="{:__('填写省份')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
        <div class="layui-input-inline">
            <input name="city" placeholder="{:__('填写城市')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
        <div class="layui-input-inline">
            <input name="area" placeholder="{:__('填写区域')}" type="text" class="layui-input"  lay-verify="required" />
        </div>
    </div> 
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('图片')}</label>
        <div class="layui-input-inline">
            <input type="text" name="images" value="" placeholder="请上传Banner" class="layui-input banner"  lay-verify="required">
        </div>
        <button type="button" class="layui-btn layui-btn-normal" lay-upload="banner"
            data-url="{:url('/ajax/upload')}?action=banner" >
            <i class="layui-icon layui-icon-upload"></i>{:__('上传图片')}
        </button>
    </div>         
    <div class="layui-form-item">
        <div class="layui-input-block">
            <div class="layui-upload-logo">
                <dl>
                    <dt> 
                        <img class="banner"  id="images" src="">
                    </dt>
                </dl>
            </div>
        </div>
    </div>  
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('状态')}</label>
        <div class="layui-input-block">
            <input name="status" type="radio" value="3" title="{:__('审核不通过')}"/>
            <input name="status" type="radio" value="2" title="{:__('正常')}" checked/>
            <input name="status" type="radio" value="1" title="{:__('待审核')}" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('礼品领取状态')}</label>
        <div class="layui-input-block">
            <input name="lpstatus" type="radio" value="2" title="{:__('已领取')}" />
            <input name="lpstatus" type="radio" value="1" title="{:__('待领取')}" checked/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">{:__('礼品领取说明')}</label>
        <div class="layui-input-block">
            <input name="lptext" placeholder="{:__('礼品领取说明')}" type="text" class="layui-input" />
        </div>
    </div> 
    <div class="layui-footer layui-form-item layui-center "  >
        <button class="layui-btn layui-btn-primary" type="button" sa-event="closePageDialog" >{:__('取消')}</button>
        <button class="layui-btn" lay-add="{:url('/system/recserivelist/add')}" lay-edit="{:url('/system/recserivelist/edit')}" lay-filter="submitPage" lay-submit>{:__('提交')}</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表状态栏 -->
<script type="text/html" id="columnStatus">
    {{#  if(d.status ==1){ }}
    待审核
    {{# }if(d.status ==2) { }}
    正常
    {{# }if(d.status ==3) { }}
    驳回申请
    {{#  } }}
</script>

<!-- // 列表工具栏 -->
<script type="text/html" id="tableBar">
    <a class="layui-table-text" data-title="{:__('编辑')}" callback="edits"  data-url="#editforms" lay-event="edit">{:__('编辑')}</a>
    <div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" data-url="{:url('/system/recserivelist/del')}?id={{d.id}}" lay-event="del">{:__('删除')}</a>
</script>
<script src="__STATICADMIN__module/xmselect/xmselect.js?v={:release()}"></script>
<include file="/public/footer" />
<script>
    layui.use(['admin', 'table', 'form'], function () {
        var admin = layui.admin;
        var table = layui.table;
        var form = layui.form;
        // 渲染权限select元素
        var draSelect = function (data, idement, checkedId) {
            var select = xmSelect.render({
                el: idement,
                tips: '请选择类别',
                name: 'cateid',
                height: 'auto',
                data: data,
                radio: true,
                clickClose: true,
                initValue: checkedId,
                prop: {
                    value: 'id',
                    name: 'title'
                },
                tree: {
                    show: true,
                    strict: false,
                    showLine: false,
                    clickExpand: false,
                },
                model: {
                    icon: 'hidden',
                    label: {
                        type: 'text'
                    }
                },
                theme: {
                    color: '#1890FF'
                }
            })
        }
        draSelect([], '#treeNode');
        // 监听类型选择
        form.on('radio(types)', function (data) {
            // 开始POST提交数据
            layui.$.ajax({
                url: '{:url("/system/recserive/index")}',
                type: 'get',
                dataType: 'json',
                data: {
                    type: data.value,
                    limit: 1000
                },
                success(data) {
                    draSelect(data.data, '#treeNodes');
                }
            });

            return false;
        })
        // 监听类型选择
        form.on('select(type)', function (data) {
            // 开始POST提交数据
            layui.$.ajax({
                url: '{:url("/system/recserive/index")}',
                type: 'get',
                dataType: 'json',
                data: {
                    type: data.value,
                    limit: 1000
                },
                success(data) {
                    draSelect(data.data, '#treeNode');
                }
            });

            return false;
        })
        /*
         * 初始化表格
        */
        var isTable = table.render({
            elem: "#lay-tableList"
            , url: "{:url('/system/recserivelist/index')}"
            , page: true
            , limit: 18
            , cols: [[
                { type: 'checkbox', width: 50 },
                { field: 'id', align: 'center', sort: true, width: 80, title: 'ID' },
                { field: 'title', align: 'left', title: '{:__("名称")}' },
                {
                    field: 'images', align: 'center', width: 100, templet: function (d) {
                        return d.user_id == 0 ? '系统添加' : '用户申请';
                    }, title: '是否申请'
                },
                {
                    field: 'images', align: 'center', width: 100, templet: function (d) {
                        return d.type == 1 ? '工长' : '设计师';
                    }, title: '类型'
                },
                {
                    field: 'cate_name', align: 'center', width: 100, title: '类别'
                },
                { field: 'mobile', align: 'left', title: '{:__("联系电话")}' },
                {
                    field: 'images', align: 'center', width: 100, templet: function (d) {
                        return d.images ? '<div><img src="' + d.images + '" width="32" height="32" lay-image-hover="" ></div>' : '<div></div>';
                    }, title: '图片'
                },
                {
                    field: 'mobile', align: 'left', title: '{:__("经验")}', templet: function (d) {
                        return d.exper + '年';
                    }
                },
                { field: 'begood', align: 'left', title: '{:__("擅长")}' },
                {
                    field: 'mobile', align: 'left', title: '{:__("区域")}', templet: function (d) {
                        return d.city + d.area;
                    }
                },
                { field: 'status', align: 'center', templet: '#columnStatus', title: '{:__("状态")}' },
                { field: 'create_time', align: 'center', width: 180, title: '{:__("添加时间")}' },
                { align: 'center', toolbar: '#tableBar', width: 220, title: '{:__("操作")}' },
            ]]
        })

        // 添加 / 编辑用户
        admin.callback.add = function (clickthis, colletction, config) {
            // 获取表格对象
            var tableThis = colletction.tableThis,
                status = typeof (tableThis) === "undefined" ? true : false;
            //渲染类别
            layui.$.ajax({
                url: '{:url("/system/recserive/index")}',
                type: 'get',
                dataType: 'json',
                data: {
                    type: 1,
                    limit: 1000
                },
                success(data) {
                    draSelect(data.data, '#treeNodes', []);
                }
            });
            // 监听权限提交
            form.on("submit(submitPage)", function (post) {
                // 获取用户id
                var pageThat = layui.$(this),
                    _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                // 开始POST提交数据
                layui.$.post(_pageUrl,
                    post.field, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg);
                            // 关闭当前窗口
                            table.reload('lay-tableList');
                            layer.close(colletction.index);
                            pageThat.attr("disabled", true);
                        }
                        else {
                            layer.error(res.msg);
                        }

                    }, 'json');

                return false;
            })
        }

        // 添加 / 编辑用户
        admin.callback.edits = function (clickthis, colletction, config) {
            // 获取表格对象
            var tableThis = colletction.tableThis,
                status = typeof (tableThis) === "undefined" ? true : false;
            //渲染类别
            layui.$.ajax({
                url: '{:url("/system/recserive/index")}',
                type: 'get',
                dataType: 'json',
                data: {
                    type: tableThis.data.type,
                    limit: 1000
                },
                success(data) {
                    draSelect(data.data, '#treeNodes', [tableThis.data.cateid]);
                }
            });
            // 渲染图片
            layui.$('#images').attr('src', tableThis.data.images);
            // 监听权限提交
            form.on("submit(submitPage)", function (post) {
                // 获取用户id
                var pageThat = layui.$(this),
                    _pageUrl = !status ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                // 开始POST提交数据
                layui.$.post(_pageUrl,
                    post.field, function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg);
                            // 关闭当前窗口
                            table.reload('lay-tableList');
                            layer.close(colletction.index);
                            pageThat.attr("disabled", true);
                        }
                        else {
                            layer.error(res.msg);
                        }

                    }, 'json');

                return false;
            })
        }
    })
</script>